import React, {Component} from 'react'
import {
    StyleSheet, Text,
    View
} from 'react-native'
import ScrollableTabView, {ScrollableTabBar} from 'react-native-scrollable-tab-view';
import NearbyItem from '../component/NearbyItem'
import Neardyheader from '../component/Neardyheader'
import SpacingViews from "../component/SpacingViews";
export default class Nearby extends Component {
    constructor(props) {
        super(props);
        const {navigate} = this.props.navigation;
        this.state = {
            typeArr: [
                {'title': '享美食', 'type': '0', 'navigate': navigate},
                {'title': '住酒店', 'type': '1', 'navigate': navigate},
                {'title': '爱玩乐', 'type': '2', 'navigate': navigate},
                {'title': '全部', 'type': '3', 'navigate': navigate},
            ],
        }
    }

    _onChangeTab = (obj) => {

    };

    componentWillMount() {

    }

    render() {
        return (
            <View style={style.outview}>
                <Neardyheader/>
                <View style={style.outview}>
                    <ScrollableTabView
                        renderTabBar={() => <ScrollableTabBar />}
                        tabBarActiveTextColor='#fe566d'
                        tabBarInactiveTextColor='#666666'
                        tabBarBackgroundColor='white'
                        tabBarUnderlineStyle={{backgroundColor: '#fe566d', height: 2}}
                        tabBarTextStyle={{fontSize: 15}}
                        onChangeTab={(i) => this._onChangeTab(i)}>
                        {this.state.typeArr.map((item, i) => {
                            return (
                                <NearbyItem key={i}
                                            tabLabel={item.title}
                                            type={item.type}
                                            style={{backgroundColor: 'white', flex: 1}}
                                            navigate={item.navigate}/>
                            )
                        })}
                    </ScrollableTabView>
                </View>
            </View>
        );
    }
}

const style = StyleSheet.create({
    outview: {
        flex: 1,
        backgroundColor: '#fff',
        justifyContent: 'center',
        alignItems: 'center',
    },
});

module.exports = Nearby